<template>
	<view class="main">
		<view class="hand">
			<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//dbleft.png" @click="blackbtn"></image>
			上传资质
		</view>
		<view class="show">
			<view class="tap" v-for="(item, index) in list" :key="index">
				<view class="taptxt">
					{{item.txt}}<span v-show="item.txt=='身份证正面'">(人脸那一面)</span>
					<span v-show="item.txt=='身份证背面'">(国徽那一面)</span>
				</view>
				<view class="tapone">
					<view class="add-img-item" v-show="item.file">
						<image class="add-img1" :src="item.file" mode="aspectFit">
							<image class="add-img-del" @click="delImg(item.key)" src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//delete.png"></image>
						</image>
					</view>
					<view v-show="!item.file" class="add-img-item" @click="openCamera(item.key)">
						<image class="add-img" src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//add.png"></image>
					</view>
				</view>
			</view>
			<view class="dibu" @click="gobtn()">
				提交
			</view>
		</view>


	</view>
</template>

<script>
	import {
		Config
	} from '../../common/Config.js'
	export default {
		components: {
		},
		mounted() {

		},

		data() {
			return {
				orderNo:'',
				merchantNo:'',
				list:[{file:'',key:'FRONT_OF_ID_CARD',txt:'身份证正面'},{file:'',key:'BACK_OF_ID_CARD',txt:'身份证背面'},{file:'',key:'SIGN_BOARD',txt:'门头照'},{file:'',key:'INTERIOR_PHOTO',txt:'室内场景照'},{file:'',key:'BANK_CARD',txt:'结算卡'}]
			}
		},
		onLoad(option) {
			this.orderNo=option.orderNo
			this.merchantNo=option.merchantNo
			this.show()
		},
		onShow() {
			
			
		},
		methods: {
			//返回上一页
			blackbtn() {
				uni.redirectTo({
					url: '../withdrawal_management/withdrawal_management'
				})	
			},
			show(){
				let data={
					orderNo:this.orderNo
				}
				this.$base.request('partyPayCredential/tryGetRemoteCredentialAll', 'POST',data)
					.then(res => {
						if(res.data.code==200){
							var arr=res.data
							if(arr.data){
								this.list[0].file=arr.data.FRONT_OF_ID_CARD
								this.list[1].file=arr.data.FRONT_OF_ID_CARD
								this.list[2].file=arr.data.SIGN_BOARD
								this.list[3].file=arr.data.INTERIOR_PHOTO
								this.list[4].file=arr.data.BANK_CARD
							}
						}else{
							this.$toast.fail(res.data.msg)
						}
					})
					.catch(err => {
				
					})
			},
			//上传图片
			imgInfo(i) {
				let tempList = [];
				this.imgList.forEach(img => {
					tempList.push(img.path);
				});
				//显示图片
				uni.previewImage({
					current: i,
					loop: false,
					urls: tempList,
					indicator: 'default'
				});
			},
			//删除图片
			delImg(key) {
				for(var i=0;i<this.list.length;i++){
					if(this.list[i].key===key){
						this.list[i].file=''
					}
				}
			},
			openCamera(key) {
				uni.chooseImage({
					// sourceType: ['camera'],
					count: 1,
					sizeType: ['compressed'],
					success: res => {
						let path = res.tempFiles[0];
						let userToken = uni.getStorageSync('userToken');
						uni.showLoading({
							title: '上传中',
							mask: true
						})
						let data = {
							orderNo:this.orderNo,
							credentialType:key,
						}
						uni.uploadFile({
							url: Config.api + 'partyPayCredential/fileUpload',
							file: path,
							name: 'file',
							formData:data,
							header: {
								Authorization: "Bearer " + userToken
							},
							success: res1 => {
								setTimeout(()=>{
									uni.hideLoading()
								},200)
								var arr=JSON.parse(res1.data)
								if(arr.code==200){
									for(var i=0;i<this.list.length;i++){
										if(this.list[i].key===key){
											this.list[i].file=arr.data+'?r='+new Date().getTime()
										}
									}
								}else{
									this.$toast.fail(arr.msg)
								}
								console.log(this.list,'8888')
							}
			
						});
						
					}
				});
			
			},
			gobtn(){
				for(var i=0;i<this.list.length;i++){
					if(this.list[i].file==''){
						this.$toast.fail('请完善信息')
						return
					}
				}
				uni.showLoading({
					title: '加载中...'
				})
				let data={}
				if(!this.merchantNo){
					data={
						orderNo:this.orderNo,
						frontOfIdCard:'FRONT_OF_ID_CARD',
						backOfIdCard:'BACK_OF_ID_CARD',
						signBoard:'SIGN_BOARD',
						interiorPhoto:'INTERIOR_PHOTO',
						bankCard:'BANK_CARD'
					}
				}else{
					data={
						merchantNo:this.merchantNo,
						// orderNo:this.orderNo,
						frontOfIdCard:'FRONT_OF_ID_CARD',
						backOfIdCard:'BACK_OF_ID_CARD',
						signBoard:'SIGN_BOARD',
						interiorPhoto:'INTERIOR_PHOTO',
						bankCard:'BANK_CARD'
					}
					
				}
				this.$base.request('partyPayCredential/credentialUpload'+ '/' + 1+ '/' + 'PERSON'+ '/' + 'legalPersonPrivate', 'POST',data)
					.then(res => {
						if(res.data.code==200){
							uni.hideLoading()
							this.$toast.success('提交成功')
							setTimeout(()=>{
								this.blackbtn()
							},500)
						}else{
							uni.hideLoading()
							this.$toast.fail(res.data.msg)
						}
					})
					.catch(err => {
				
					})
			}
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		overflow-x: hidden;
		// background-color: #F5F5F5;

		/deep/.van-list__finished-text {
			margin-top: 100upx;
			padding-bottom: 200upx;
		}

		/deep/.van-hairline--top-bottom::after {
			border-width: 0;
		}
		.hand{
			text-size-adjust: 100% !important;
			-webkit-text-size-adjust: 100% !important;  
			-moz-text-size-adjust: 100% !important;
			width: 100%;
			background-color: #4B98ED;
			font-size: 30upx;
			padding: 20upx 0;
			font-family: PingFang SC Bold, PingFang SC Bold-Bold;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
			position: relative;
			image{
				width:22upx;
				height: 39upx;
				position: absolute;
				left: 31upx;
				top: 22upx;
			}
		}
		.show{
			width: 100%;
			box-sizing: border-box;
			padding: 32upx;
			.tap{
				width: 100%;
				box-sizing: border-box;
				background-color: #c7c7c7;
				border-radius:20upx ;
				text-align: center;
				padding: 20upx;
				margin-bottom: 20upx;
				.taptxt{
					font-size: 26upx;
					font-weight: 700;
					margin-bottom: 20upx;
					span{
						color: #50a1f3;
					}
				}
				.tapone{
					width: 100%;
					height: 300upx;
					box-sizing: border-box;
					.add-img-item {
						width: 100%;
						height: 300upx;
						border-radius: 20upx;
						box-sizing: border-box;
					}
					.add-img {
						width: 128upx;
						height: 128upx;
						border-radius: 16upx;
						margin-top: 80upx;
					}
					.add-img1 {
						width: 65%;
						height: 300upx;
						border-radius: 16upx;
						margin: 0 auto;
						border: 4upx solid #fff;
						position: relative;
					}
								
					.add-img-del {
						position: absolute;
						width: 40rpx;
						height: 40rpx;
						right: 146upx;
						// top: -6upx;
						border-radius: 20rpx;
					}
								
					
				}
			}
			.dibu{
				width: 600upx;
				border-radius: 20upx;
				background-color: #4B98ED;
				color: #ffffff;
				text-align: center;
				padding: 20upx 0;
				margin: 100upx auto;
			}
			
		}
		
		

	}
</style>
